<template>
  <el-row>
    <el-col>
      <el-card>
        <el-form :inline=true class="demo-form-inline">
          <el-form-item>
            <el-select v-model="condition.payType" placeholder="请选择订单支付方式" style="width: 200px;"
                       @change="getOrderList(1)" clearable :value-on-clear=null>
              <el-option label="余额" :value="0"/>
              <el-option label="支付宝" :value="1"/>
              <el-option label="微信" :value="2"/>
              <el-option label="银联" :value="3"/>
              <el-option label="其他" :value="4"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="condition.status" placeholder="请选择订单状态" style="width: 200px;"
                       @change="getOrderList(1)" clearable :value-on-clear=null>
              <el-option label="未支付" :value="0"/>
              <el-option label="已支付" :value="1"/>
              <el-option label="已发货" :value="2"/>
              <el-option label="已收货" :value="3"/>
              <el-option label="退货退款" :value="4"/>
              <el-option label="退换货" :value="5"/>
              <el-option label="仅退款" :value="6"/>
              <el-option label="售后" :value="7"/>
              <el-option label="其它" :value="8"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-scrollbar>
          <el-table :data="orderList.list" border height="600px" style="width: 100%">
            <el-table-column fixed prop="id" label="订单号"/>
            <el-table-column fixed prop="createTime" label="下单时间"/>
            <el-table-column prop="payType" label="支付方式" width="100px">
              <template #default="scope">
                <div v-if="scope.row.payType == 0">余额</div>
                <div v-if="scope.row.payType == 1">支付宝</div>
                <div v-if="scope.row.payType == 2">微信</div>
                <div v-if="scope.row.payType == 3">银联</div>
                <div v-if="scope.row.payType == 4">其他</div>
              </template>
            </el-table-column>
            <el-table-column prop="addrDetail" label="收货地址"/>
            <el-table-column prop="status" label="订单状态" width="100px">
              <template #default="scope">
                <div v-if="scope.row.status == 0">待付款</div>
                <div v-if="scope.row.status == 1">已付款</div>
                <div v-if="scope.row.status == 2">已发货</div>
                <div v-if="scope.row.status == 3">已收货</div>
                <div v-if="scope.row.status == 4">售后</div>

              </template>
            </el-table-column>
            <el-table-column label="操作" width="500px">
              <template #default="scope">
                <el-button type="primary" @click="showOrderDetail(scope.row.orderDetails)">查看订单商品详情</el-button>

                <el-tag v-if="scope.row.status === 0" type="info">待付款</el-tag>
                <el-button v-else-if="scope.row.status === 1" type="success" @click="shipping(scope.row.id)">发货</el-button>
                <el-steps v-if="stepShowFlag1 == true" style="max-width: 580px" :active="scope.row.status + 1" finish-status="success">
                  <el-step title="未支付" />
                  <el-step title="已支付" />
                  <el-step title="已发货" />
                  <el-step title="已收货" />
                </el-steps>
              </template>

            </el-table-column>
          </el-table>
        </el-scrollbar>
        <el-row class="row-bg" justify="center" style="padding-top: 20px;">
          <el-form-item>
            <el-pagination background layout="prev, pager, next" :total="orderList.total"
                           :page-size="orderList.pageSize" @change="getOrderList"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="orderList.pageSize" placeholder="每页显示条数"
                       style="width: 100px; padding-left: 40px" @change="getOrderList(orderList.pageNum)">
              <el-option label="5条" :value="5"/>
              <el-option label="10条" :value="10"/>
              <el-option label="20条" :value="20"/>
              <el-option label="30条" :value="30"/>
            </el-select>
          </el-form-item>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog v-model="detailDialogShow" title="订单商品详情" width="800px">
    <el-table :data="orderDetails" border height="460px" style="width: 100%">
      <el-table-column prop="id" label="ID" width="60px"/>
      <el-table-column prop="goods.name" label="名称"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="goods.color" label="颜色" />
      <el-table-column prop="goods.version" label="版本" />
      <el-table-column prop="count" label="数量" width="60px"/>
    </el-table>
  </el-dialog>

</template>

<script setup>
import {ref} from "vue";
import orderApi from "@/api/orderApi.js";
import {ElMessage} from "element-plus";
//步骤条
const stepShowFlag1 = ref(true);
const orderList = ref({
  pages: 0,
  pageNum: 0,
  pageSize: 10
});
//搜索条件
const condition = ref({
  payType: null,
  status: null
});
//订单商品详情对话框状态
const detailDialogShow = ref(false);
//订单商品详情
const orderDetails = ref([]);
const orderList1 = ref([]);
//发货
function shipping(orderId) {
  orderApi.shipping({id: orderId}).then(resp => {
    if(resp.code == 10000){
      ElMessage.success("发货成功");
      getOrderList(1);
    }else {
      ElMessage.error(resp.msg)
    }
  })
}
//获取订单
function getOrderList(pageNum) {
  orderApi.selectByCondition(condition.value, pageNum, orderList.value.pageSize)
      .then(resp => {
        orderList.value = resp.data;
      });
}
getOrderList(1);

//显示订单详情
function showOrderDetail(goodsList, orderDetail) {
  orderDetails.value = goodsList;

  console.log(orderDetails.value);
  detailDialogShow.value = true;
}

</script>

<style scoped>

</style>